<template>
  <div class="chart-component">
    <div class="chart-header">
      <div>
        <span>共有{{ abnormalDataCount }}条异常数据</span>
        <span v-show="abnormalDataCount > 0"
          >,占比{{ abnormalDataCountPercent }}%</span
        >
      </div>
      <div>
        <span>可视化特征列：</span>
        <a-select
          v-model="currentFeatureColumn"
          style="width: 180px;"
          size="small"
        >
          <a-select-option
            v-for="column in featureColumns"
            :key="column.value"
            :value="column.value"
          >
            {{ column.label }}
          </a-select-option>
        </a-select>
      </div>
    </div>
    <div class="chart-content">
      <div v-if="!chartDataEmpty" id="dual-axes-chart-id"></div>
      <div v-else class="operator-chart-empty">
        <img alt="" src="@/assets/view/empty2.png" />
        暂无图表数据
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 经济类算子节点 - 数据平滑图表
 */
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import { DualAxesChart } from '@zjlabvis/vis-charts'

@Component({
  components: {},
})
export default class OutlierIdentificationChart extends Vue {
  private chartData: any[] = [] // 图表数据
  public yAxisAttribute: string[] = []
  public currentFeatureColumn: string = '' // 当前选择的特征列
  public featureColumns: any[] = [] // 所有供选择的特征列
  public abnormalDataCount: number = 0 // 异常数据量
  public abnormalDataCountPercent: number = 0 // 异常百分比
  public outlierBins: any[] = [] // 异常百分比
  public chartDataEmpty: boolean = false // 空数据

  // 图表数据
  public get getQueryDataVis() {
    return DataStore.getQueryDataVis || {}
  }

  public get commonConfig() {
    return {
      titleIsShow: false,
      value: [this.chartData, this.chartData],
      valueKey: ['hist', 'normal'],
      labelKey: 'bin',
      labelIsShow: false,
      labelTextMaxlength: 4,
      xAxisAttribute: 'bin',
      yAxisAttribute: [['hist'], ['normal']],
      legendIsShow: false,
      tooltipIsShow: true,
      geometryOptions: [
        {
          geometry: 'column',
          minColumnWidth: 22,
          maxColumnWidth: 44,
          // color: 'rgba(91,143,249,0.85)',
          color: (value: any) => {
            const { bin } = value
            if (this.outlierBins.includes(bin)) {
              return 'rgba(255, 163, 158,0.85)'
            }
            return 'rgba(91,143,249,0.85)'
          },
          label: { position: 'middle', style: { fill: '#6D7278' } },
        },
        { geometry: 'line', smooth: true, color: '#6D7278' },
      ],
    }
  }

  @Watch('getQueryDataVis', { deep: true })
  private watchChartResult() {
    if (this.compInstance && !this.chartDataEmpty) {
      this.compInstance.destroy()
    }
    const columns: string[] = Object.keys(this.getQueryDataVis)
    if (columns.length > 0) {
      this.chartDataEmpty = false
      this.dealFeatureColumns(columns)
      this.dealChartData()
      this.$nextTick(() => {
        this.init()
      })
    } else {
      this.chartDataEmpty = true
      this.compInstance = ''
    }
  }

  /**
   * 处理特征列
   */
  public dealFeatureColumns(columns: string[]) {
    const [first] = columns
    this.currentFeatureColumn = first // 当前选择的特征列
    this.featureColumns = columns.map((column: string) => {
      return { value: column, label: column }
    }) // 所有供选择的特征列
  }

  @Watch('currentFeatureColumn')
  public watchCurrentFeatureColumn(newColumn: string, oldColumn: string) {
    if (oldColumn && newColumn) {
      this.dealChartData()
      this.$nextTick(() => {
        this.compInstance.destroy()
        this.init()
      })
    }
  }

  public dealChartData() {
    const featureColumnData: any = this.getQueryDataVis[
      this.currentFeatureColumn
    ] // 当前特征列图表数据
    const { bin, hist, normal } = featureColumnData
    this.chartDataEmpty = bin?.length === 0
    this.$nextTick(() => {
      this.abnormalDataCount = featureColumnData.outlier_num
        ? featureColumnData.outlier_num
        : 0
      this.abnormalDataCountPercent = featureColumnData.outlier_percent
      this.outlierBins = []
      if (featureColumnData?.outlier_bins) {
        this.outlierBins = featureColumnData.outlier_bins.map(
          (item: any) => `${item}`
        )
      }
      if (bin?.length > 0) {
        const chartData: any[] = []
        bin.forEach((element: any, index: number) => {
          const item: any = {
            bin: `${element}`,
            hist: hist[index],
            normal: normal[index],
          }
          chartData.push(item)
        })
        this.chartData = chartData
      }
    })
  }

  public async init() {
    this.compInstance = new DualAxesChart(
      'dual-axes-chart-id',
      this.commonConfig
    )
  }
  public compInstance: any = ''
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.chart-component {
  height: 100%;
  width: 100%;

  .chart-header {
    align-items: center;
    color: #373b52;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 400;
    justify-content: space-between;
    letter-spacing: 1px;
    margin-bottom: 14px;
    min-height: 24px;
    width: 100%;
  }

  .chart-content {
    background: #fff;
    padding: 8px 20px;
    width: 100%;

    .operator-chart-empty {
      align-items: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
